در قسمت‌های قبلی با نحوه اضافه کردن متن‌ها و عناوین و در آخر لینک‌ها به صفحات آشنا شدیم. حالا در این بخش قصد داریم تا عکس‌ها را نیز به صفحات خود اضافه کنیم؛ بدین ترتیب وجهه بهتری را از خود نمایش خواهند داد. با ما برای این آموزش همراه شوید.
اضافه کردن عکس:

مرحله اول: برای قرار دادن تصویر در صفحه, در اولین قدم تگ <img> را در ابتدای کد قرار می‌دهیم.

مرحله دوم: در این مرحله ما بعد از کلمه img, باید به نوعی به صفحه بگوییم که عکسمان کجا قرار دارد تا مرورگر بتواند آن را پیدا کرده و نمایش دهد. برای این کار ما به یک اتریبیوت نیازمند هستیم که این کار را برای ما انجام دهد. این اتریبیوت src نام دارد که در واقع حاوی آدرس (url) عکس ما در اینترنت است.

<img src="url"  / >

مرحله سوم: در آخرین مرحله تنها کافیست علامت / را در انتهای تگ img قرار دهیم, تا تصویر ما نمایش داده شود. همانطور که می‌بینید المان عکس بر خلاف المان‌های قبلی که خواندیم نیازی به یک تگ جداگانه برای بسته شدن ندارد. این بدین معناست که ما چیزی به اسم <img/> نداریم. پس همیشه علامت / را در همان تگ ابتدایی قرار می‌دهیم.

به مثال‌های زیر توجه نمایید:

 
نمونه

<p>تصویر شماره 1</p>

<img src="http://zoomit.ir/templates/ja_argo/images/logo4.png" />
نتیجه‌ای که مرورگر نمایش خواهد داد

تصویر شماره 1

 logo4

توجه داشته باشید که برای نمایش تصاویر در اینترنت باید حتما آن‌ها را در جایی آپلود کرده و آدرس کامل و دقیق آن‌ها را به همراه پسوند وارد نمایید.  فایل هایی که اسمشان دقیق نباشد یا فرمت عکس در آن ها نباشد به نمایش در نمی‌آیند. پس  zoomit.ir/ax.jpg یا zoomit.ir/ax.png صحیح است و  zoomit.ir/ax اشتباه است.

پیشنهاد: پیشنهاد می‌کنیم آدرس مستقیم عکس را از نوار آدرس مرورگر کپی کنید تا به طور کامل آدرس آن کپی شود.

اتریبیوت Alt:

یکی دیگر از اتریبیوت‌های تصاویر alt است که در واقع حاوی حرف یا نوشته‌ است. این نوشته در زمانی که عکس بارگذاری نمی‌شود به جای عکس نمایش در می‌آید. alt خصوصا در هنگامی که گوگل به دنبال جستجوی تصاویر است استفاده می‌شود.

هر چند گاهی برخی افراد چندان به اتریبیوت alt توجه نمی‌کنند، ولی این اتریبیوت نقش بسیار مهمی در طراحی صفحات وب و نتایج گوگل دارد؛ پس همیشه سعی کنید آن را خالی نگذاشته و با کلمات مرتبط پر نمایید.  همچنین alt برای معلولین یا افراد ناتوان و دستگاههای خواندن صفحه مثل braille تاثیر بسزایی دارد.

اتریبیوت alt را می‌توانید به صورت زیر بنویسید.
نمونه کد:

< img src="url" alt= "کلمه"  />

 تنظیم ابعاد تصاویر

 در حد امکان سعی کنید تصاویری که در صفحه استفاده می‌کنید سایز مناسبی داشته باشند؛ ولی در اچ تی ام ال می‌توانید تصاویر را با اندازه دلخواه بر حسب پیکسل (px) بزرگتر یا کوچکتر کنید. به مثال زیر توجه کنید.
نمونه

<img src = "(zoomit.ir/ax/html.jpg ) آدرس اینترنتی تصویر همانند  " style="width:256px ;  height:365px; "  />
نتیجه‌ای که مرورگر نمایش خواهد داد

1024px Spotify HQ 730x492

در اولین قدم, ما اتریبیوت Style را بعد از تصویرمان قرار داده‌ایم. سپس یکبار کلمه hieght را نوشته و بعد از علامت : طول تصویر را بر حسب پیکسل وارد می کنیم.  در مرحله بعد نیز  یکبار کلمه width را نوشته و عرض مورد نظر را بر حسب پیکسل وارد می‌کنیم.

نکته بسیار مهم: توجه کنید که در هنگام وارد کردن مشخصات در داخل Style، بین هر دو استایل، یک علامت ; قرار دهید.

نکته: ابعاد تصاویر بر حسب پیکسل وارد نمایید.

راه دیگر برای تغییر ابعاد تصاویر آن است که آن‌ها را بدون اتریبیوت استایل بنویسید. در واقع استفاده از اتریبیوت استایل همیشه ضروری نیست و شما می‌توانید طول و عرض را به صورت مستقیم نیز استفاده کنید. بنابراین تصویر زیر نیز دقیقا همان کاری را انجام می‌دهد که در حین بکاربردن Style نشان داده شد.

<img src = "zoomit.ir/ax/html.jpg آدرس اینترنتی تصویر همانند"   width="256px"  height="365px"  />

نکته: توجه داشته باشید که کلمه px  که را که بعد از ابعاد داده شده در اتریبیوت های طول و عرض  در مثال بالا نوشته‌ایم، . این کلمه در واقع به مرورگر میگوید که ابعاد عکس شما بر اساسی اندازه گیری شده است. ما در اینجا ابعاد عکس را به صورت پیکسلی px مشخص کرده‌‌ایم پس واحد آن را بعد از آن یادداشت میکنیم. اهمیت این موضوع زمانی مشخص میشود که ننوشتن واحد اندازه‌ها در برخی موارد باعث بروز خطا در نتیجه شود. پس همیشه این موضوع را در طراحی صفحات وب خودتان رعایت کنید.
خلاصه قسمت پنجم:

در این قسمت چیزهایی که یادگرفته‌ایم را به صورت کاملا خلاصه مرور می‌کنیم.

    در پنجمین قسمت از سری آموزش HTML و سی‌اس‌اس با نحوه قرار دادن تصاویر آشنا شدیم. قاعده کلی قرار دادن تصاویر </ " img src="url > است.
    در ادامه با اتریبیوت‌های مهم تصاویر از جمله alt بازگو کردیم که به شما در کسب نتایج بهتر در جستجوی گوگل کمک می‌کند.
    در آخر نیز نحوه‌ی تغییر سایز تصاویر توسط دو اتریبیوت طول (hieght) و عرض (width) فراگرفتیم.

نوبت شما

خب نوبتی هم که باشد، دیگر نوبت شماست. پس همین حالا دست به کار شوید و به ما نشان دهید که همه چیزهایی که گفته‌ایم را آموخته‌اید.